<script setup>
import 'bootstrap/dist/css/bootstrap.min.css'
import QA from "../QA.vue"
import {useRoute, useRouter} from 'vue-router'
import ProjectNav from "@/components/ProjectNav.vue";
import {defineAsyncComponent, reactive, ref} from "vue";

const route = useRoute()

const projectData = [{
  title: "安全阀的计量检测",
  path: "/project/aqf",
  info: "安全阀在安装前应进行耐压试验和气密性试验，以检验安全阀的强度和密封性能。",
  detail_img: "/src/assets/images/img/aqf02.png",
  bg_img: "/src/assets/images/img/857f806021c247a4aad6da9446961295_th.jpg",
  detail: "安全阀在安装前应进行耐压试验和气密性试验，以检验安全阀的强度和密封性能。合格后才能进行校正和调整。在气体试验台上，通过调节施加在阀游上的载荷来校正安全阀的开启压力。红杆式安全网调节重锤位置，弹簧式安全阀调节弹簧压缩量。安全网的开启压力应符合锅炉、压力容器安全技术监察规程的有关规定。",
},{
  title: "防雷装置检测服务",
  path: "/project/fl",
  info: "具备防雷装置安全检测甲级资质，可以在全国范围内从事《建筑物防雷设计规范》规定的第一类、第二类、第三类建（构）筑物防雷装置检测。",
  detail_img: "/src/assets/images/img/lightning-city-night-1082080.jpg",
  bg_img: "/src/assets/images/img/lightning-city-night-1082080-1024x678.jpg",
  detail: "具备防雷装置安全检测甲级资质，可以在全国范围内从事《建筑物防雷设计规范》规定的第一类、第二类、第三类建（构）筑物防雷装置检测。",
},
  {
    title: "特种设备检测服务",
    path: "/project/tzsb",
    info: "能够为各单位、各企业的特种设备（如：锅炉、压力容器、压力管道、安全阀、电梯）进行定期检验。",
    detail_img: "/src/assets/images/img/12456119673460619619-gas_reductor-1024x661.jpg",
    bg_img: "/src/assets/images/img/science-in-hd-pAzSrQF3XUQ-unsplash.jpg",
    detail: "能够为各单位、各企业的特种设备（如：锅炉、压力容器、压力管道、安全阀、电梯）进行定期检验。",
  },
  {
    title: "气体专项检测项目",
    path: "/project/rqbjq",
    info: "通过设立的气体分析实验室，可开展可燃气体浓度报警装置及各类气体传感器的校验检测业务。",
    icon: "hammer",
    detail_img: "/src/assets/images/img/1-2110111H340-lp.jpg",
    bg_img: "/src/assets/images/img/science-in-hd-pAzSrQF3XUQ-unsplash.jpg",
    detail: "通过设立的气体分析实验室，可开展可燃气体浓度报警装置及各类气体传感器的校验检测业务。\n"+
        "根据相关要求规范安装、使用以及量值准确关系着企业乃至广大人民群众的生命财产安全，各工业企业、餐饮企业必须安装可燃气体浓度报警装置并确保装置在检定（校准）有效期内，不按照要求整改的企业可能面临行政处罚危机。\n" +
        "校验周期3~5个工作日。可提供加急服务。",
  }]

const data = function () {
  for (const item in projectData) {
    const data = projectData[item]
    if (data.path === route.path) {
      return data
    }
  }
  return {}
}()

const backgroundImage = ref(data.bg_img)

const asyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    switch (data.path) {
      case '/project/rqbjq':
        resolve(import("@/components/view/project/Rqbjq.vue"))
        break
      case '/project/fl':
        resolve(import("@/components/view/project/Fl.vue"))
        break
      case '/project/tzsb':
        resolve(import("@/components/view/project/Tzsb.vue"))
        break
      case '/project/aqf':
        resolve(import("@/components/view/project/Aqf.vue"))
        break
    }
  })
})

</script>

<template>

  <section class="elementor-section " :style="{backgroundImage: 'url(' + backgroundImage + ')'}" >
    <div class="elementor-container" >
      <div class="elementor-column-50">
        <div class="elementor-widget-wrap">
          <div class="elementor-element">
            <div class="elementor-widget-container">
              <h2 class="elementor-heading-title elementor-size-default">一站式计量行业解决方案</h2></div>
          </div>
          <div class="elementor-element">
            <div class="elementor-widget-container">
              <h3 class="elementor-heading-title elementor-size-default">{{ data.title }}</h3></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="container">
    <div class="center">
      <div class="">
        <p class="colText">
          {{data.info}}
        </p>
      </div>
    </div>
  </div>

  <div class="severAll">
    <div class="container severBox">
      <div class="row ">
        <div class="col-6">
          <img fetchpriority="high" decoding="async" width="578" height="373" :src="data.detail_img"
               sizes="(max-width: 1024px) 100vw, 1024px" alt="">
        </div>
        <div class="col-6 severRight">
          <h3>{{ data.title }}</h3>
          <p>{{ data.detail }}</p>
          <span v-if="data.path=='/project/aqf'">校验周期3~5个工作日。可提供加急服务。</span>
        </div>
      </div>
    </div>
  </div>

<div class="">
  <div class="tjAll">
    <div class="container">
      <div class="tjTitle">
        <img src="../../assets/images/tjPic.png">
      </div>
      <div class="row tjText">

        <div class="col-4 tjNavLeft">
          <ProjectNav :data="projectData"/>

        </div>
        <div class="col-8 tjNavRight">
          <asyncComponent/>
        </div>
        <div class="more">立即咨询 > </div>
      </div>
    </div>


  </div>
  <div class="botPicAll">
    <img class="one" src="../../assets/images/rkPic.png"/>
    <img class="two" src="../../assets/images/botPic.png"/>
  </div>
</div>

  <QA></QA>

<!--  <div class="container">更多问题请与我们的工程师联系</div>-->

</template>

<style scoped>
.elementor-section-header {
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.elementor-section {
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  color: #6c6c6c;
  word-wrap: break-word;
  box-sizing: border-box;
  position: relative;
  background-image: v-bind(background);
}

.elementor-container {
  min-height: 491px;
  max-width: 1400px;
  align-items: center;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

h2.elementor-heading-title {
  font-size: 24px;
  color: #fce497;
}

h3.elementor-heading-title {
  font-size: 35px;
  color: #ffffff;
}

img {
  height: auto;
  max-width: 100%;
}
.colText{
  font-size:20px;
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-style: Medium;
  margin: 50px auto 20px auto;

}
.severAll{
  display: flex;
  justify-content: space-between;
  background: #fff;
  text-align: left;
  padding: 0px 60px 60px 60px;
}
.severBox{
  background: #fff;
  box-shadow: 0px 17px 12px 0px #D9D9D926;
  padding: 50px;
}

.severRight{
  align-content: left;
  margin-top: 80px;
}
.severRight h3{
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 30px;
}
.severRight p{
  font-size: 18px;
  line-height: 40px
;
}
.tjAll{
  padding-top: 50px;
  background: #F6F8FC;
}
.tjTitle{
  width: 395px;
  height: 66px;
  margin:  20px auto 60px auto;
}
.tjTitle img {
  width: 100%;
  height: 100%;
}
.tjNavRight{
  font-size: 20px;
}
.more{
  width: 226px;
  height: 54px;
  line-height: 54px;
  opacity: 1;
  border-radius: 3px;
  background: linear-gradient(90deg, #45AFFF 0%, #5669E7 100%);
  margin: 40px auto;
  color: #fff;
}
.botPicAll{
  margin: 50px;
}
.botPicAll .one{
   width: 1300px;
  height: 166px;
  img{
    width: 100%;
    height: 100%;
  }
}
.botPicAll .two{
  width: 1300px;
  height: 166px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>